<template>
  <div>
    <instruct
      domain="home.instruct"
      :msg="$t('dashboard.instruct')"
    />

    <!-- top -->
    <div class="top-bar justify-between">
      <div class="top-card relative">
        <div class="relative" style="z-index: 1">
          <div class="top-label">
            <el-tooltip
              effect="dark"
              :content="$t('dashboard.actived_operator_tip')"
              placement="top"
            >
              <span>
                {{ $t('dashboard.operators_7') }}
              </span>
            </el-tooltip>
          </div>
          <div class="top-num">{{ numberFilter( activeOperator ) }}</div>
          <div class="flex">
            <el-tooltip
              :open-delay="hoverDelay"
              effect="dark"
              :content="$t('dashboard.radio_tip1')"
              placement="top"
            >
              <div class="top-percent">{{ getOperatorPercent }}%</div>
            </el-tooltip>
            <div class="top-count">
              {{  $t('dashboard.from') }} {{ numberFilter(totalOperator) }}
            </div>
          </div>
        </div>

        <img
          class="absolute right-0 top-0 h-full"
          src="@/assets/images/dashboard/dashboard-bg1.png"
          alt=""
          srcset=""
        >
      </div>
      <div class="top-card relative">
        <div class="relative" style="z-index: 1">
          <div class="top-label">
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('dashboard.actived_developer_tip')"
                placement="top"
              >
                <span>
                  {{ $t('dashboard.developer_7') }}
                </span>
              </el-tooltip>
            </div>
          </div>
          <div class="top-num">{{ numberFilter( activeDeveloper ) }}</div>
          <div class="flex">
            <el-tooltip
              :open-delay="hoverDelay"
              effect="dark"
              :content="$t('dashboard.radio_tip9')"
              placement="top"
            >
              <div class="top-percent">{{ getDeveloperPercent }}%</div>
            </el-tooltip>
            <div class="top-count">
              {{ $t('dashboard.from') }} {{ numberFilter(totalDeveloper) }}
            </div>
          </div>
        </div>
        <img
          class="absolute right-0 top-0 h-full"
          src="@/assets/images/dashboard/dashboard-bg2.png"
          alt=""
          srcset=""
        >
      </div>
      <div class="top-card relative">
        <div class="relative" style="z-index: 1">
          <div class="top-label">
            {{ $t('dashboard.applications_appstore') }}
          </div>
          <div class="top-num">{{ numberFilter( appstoreCount ) }}</div>
        </div>
        <img
          class="absolute right-0 top-0 h-full"
          src="@/assets/images/dashboard/dashboard-bg3.png"
          alt=""
          srcset=""
        >
      </div>
    </div>
    <!-- device report -->
    <div class="lg-card mt-7">
      <div class="data-block">
        <div
          class="data-block-item"
          :class="[deviceActived === 1 ? 'actived' : '']"
          @click="handleDeviceTab(1)"
        >
          <div>
            <div class="data-label">
              <el-tooltip effect="dark" placement="top">
                <template #content>
                  <div>
                  {{ $t('dashboard.online_device_tip1') }}
                  </div>
                </template>
                <span>
                  {{ $t('dashboard.online_device') }}
                </span>
              </el-tooltip>
            </div>
            <div class="data-count">
              {{ numberFilter( onlineDevice ) }}
            </div>
            <div>
              <el-tooltip
                :open-delay="hoverDelay"
                effect="dark"
                placement="top"
              >
              <template #content>
                <div>
                  {{ $t('dashboard.radio_tip3') }}
                  <br>
                  {{ $t('dashboard.radio_calc1') }}
                </div>
              </template>
                <div>
                  <span v-if="getOnlinePercent >= 0" class="data-percent">
                    <svg-icon icon-class="trend-up" style="height: 1.4em" />
                    {{ getOnlinePercent }}%</span>
                  <span v-else class="data-percent-down">
                    <svg-icon icon-class="trend-down" style="height: 1.4em" />
                    {{ getOnlinePercent }}%</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div
          class="data-block-item"
          :class="[deviceActived === 2 ? 'actived' : '']"
          @click="handleDeviceTab(2)"
        >
          <div>
            <div class="data-label">
              <el-tooltip effect="dark" placement="top">
                <template #content>
                  <div>
                    {{ $t('dashboard.activity_device_tip') }}
                    <br>
                    {{ $t('dashboard.active_device_tip') }}
                  </div>
              </template>
                <span>
                  {{ $t('dashboard.activity_device') }}
                </span>
              </el-tooltip>
            </div>
            <div class="data-count">
              {{ numberFilter( activityTodayDevice ) }}
              <span style="font-size: 12px; color: #797979">
                &nbsp; (
                {{ $t('dashboard.total') }}
                {{ numberFilter( activityDevice ) }}
                )
              </span>
            </div>
            <div>
              <el-tooltip
                :open-delay="hoverDelay"
                effect="dark"
                placement="top"
              >
              <template #content>
                <div>
                  {{ $t('dashboard.radio_tip2') }}
                  <br>
                  {{ $t('dashboard.radio_calc2') }}
                </div>
              </template>
                <div>
                  <span v-if="getActivityPercent >= 0" class="data-percent">
                    <svg-icon icon-class="trend-up" style="height: 1.4em" />
                    {{ getActivityPercent }}%</span>
                  <span v-else class="data-percent-down">
                    <svg-icon icon-class="trend-down" style="height: 1.4em" />
                    {{ getActivityPercent }}%</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>

      <div class="chart-block">
        <!-- <progress-chart /> -->
        <!-- <stock-device-chart @average="stockDeviceAverage = $event" /> -->
        <activity-device-hour-chart
          v-if="deviceActived === 1"
          ref="onlineDevice"
        />
        <activity-device-day-chart
          v-if="deviceActived === 2"
          ref="activityDevice"
        />
      </div>
    </div>

    <!-- estate report -->
    <div class="lg-card mt-7">
      <div class="data-block">
        <div
          class="data-block-item"
          :class="[estateActived === 3 ? 'actived' : '']"
          @click="handleEstateTab(3)"
        >
          <div>
            <div class="data-label">

              <el-tooltip effect="dark" placement="top">
                <template #content>
                  <div>
                    {{ $t('dashboard.actived_device_tip') }}
                    <br>
                    {{ $t('dashboard.actived_device_tip2') }}
                  </div>
              </template>
                <span>
                  {{ $t('dashboard.active_device') }}
                </span>
              </el-tooltip>
            </div>
            <div class="data-count">
              {{ numberFilter( activedTodayDevice ) }}

              <span style="font-size: 12px; color: #797979">
                &nbsp; (
                {{ $t('dashboard.total') }}
                {{ numberFilter( activedDevice ) }}
                )
              </span>
            </div>
            <div>
              <el-tooltip
                :open-delay="hoverDelay"
                effect="dark"
                placement="top"
              >
              <template #content>
                <div>
                  {{ $t('dashboard.radio_tip2') }}
                  <br>
                  {{ $t('dashboard.radio_calc2') }}
                </div>
              </template>
                <div>
                  <span v-if="getActivedPercent >= 0" class="data-percent">
                    <svg-icon icon-class="trend-up" style="height: 1.4em" />
                    {{ getActivedPercent }}%</span>
                  <span v-else class="data-percent-down">
                    <svg-icon icon-class="trend-down" style="height: 1.4em" />
                    {{ getActivedPercent }}%</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div
          class="data-block-item"
          :class="[estateActived === 4 ? 'actived' : '']"
          @click="handleEstateTab(4)"
        >
          <div>
            <div class="data-label">

              <el-tooltip effect="dark" placement="top">
                <template #content>
                  <div>
                    {{ $t('dashboard.stock_device_tip') }}
                    <br>
                    {{ $t('dashboard.stock_device_tip2') }}
                  </div>
              </template>
                <span>
                  {{ $t('dashboard.stock_device') }}
                </span>
              </el-tooltip>
            </div>
            <div class="data-count">
              {{ numberFilter( stockTodayDevice ) }}
              <span style="font-size: 12px; color: #797979">
                &nbsp;(
                {{  $t('dashboard.total') }} {{ numberFilter(stockDevice ) }})
              </span>
            </div>
            <div>
              <el-tooltip
                :open-delay="hoverDelay"
                effect="dark"
                placement="top"
              >
              <template #content>
                <div>
                  {{ $t('dashboard.radio_tip2') }}
                  <br>
                  {{ $t('dashboard.radio_calc2') }}
                </div>
              </template>
                <div>
                  <span v-if="getStockPercent >= 0" class="data-percent">
                    <svg-icon icon-class="trend-up" style="height: 1.4em" />
                    {{ getStockPercent }}%</span>
                  <span v-else class="data-percent-down">
                    <svg-icon icon-class="trend-down" style="height: 1.4em" />
                    {{ getStockPercent }}%</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>

      <div class="chart-block">
        <!-- <progress-chart /> -->
        <!-- <stock-device-chart @average="stockDeviceAverage = $event" /> -->

        <actived-device-chart v-if="estateActived === 3" ref="acitivedDevice" />
        <stock-device-chart v-if="estateActived === 4" ref="stockDevice" />
      </div>
    </div>

    <!-- app download -->
    <div class="lg-card mt-7">
      <div class="data-block">
        <div
          class="data-block-item"
          :class="[appDownActived === 1 ? 'actived' : '']"
          @click="handleAppTab(1)"
        >
          <div>
            <div class="data-label">

              <el-tooltip effect="dark" placement="top">
                <template #content>
                  <div>
                    {{ $t('dashboard.install_tip') }}
                  </div>
              </template>
                <span>
                  {{ $t('dashboard.install') }}
                </span>
              </el-tooltip>
            </div>
            <div class="data-count">
              {{ numberFilter( installCount ) }}
            </div>
            <div>
              <el-tooltip
                :open-delay="hoverDelay"
                effect="dark"
                placement="top"
              >
              <template #content>
                <div>
                  {{ $t('dashboard.radio_tip2') }}
                  <br>
                  {{ $t('dashboard.radio_calc2') }}
                </div>
              </template>
                <div>
                  <span v-if="getInstallPercent >= 0" class="data-percent">
                    <svg-icon icon-class="trend-up" style="height: 1.4em" />
                    {{ getInstallPercent }}%</span>
                  <span v-else class="data-percent-down">
                    <svg-icon icon-class="trend-down" style="height: 1.4em" />
                    {{ getInstallPercent }}%</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div
          class="data-block-item"
          :class="[appDownActived === 2 ? 'actived' : '']"
          @click="handleAppTab(2)"
        >
          <div>
            <div class="data-label">
              <el-tooltip effect="dark" placement="top">
                <template #content>
                  <div>
                    {{ $t('dashboard.update_process_tip') }}
                  </div>
              </template>
                <span>  {{ $t('dashboard.update_process') }}</span>
              </el-tooltip>
            </div>
            <div class="data-count">
              {{ getProcessPercent }}%
            </div>
          </div>
        </div>
      </div>
      <div class="chart-block">
        <app-install-chart v-if="appDownActived === 1" ref="appInstall" />
        <div v-if="appDownActived === 2" style="display: flex; height: 400px">
          <div class="flex-1" style="padding: 30px; overflow: hidden">
            <div class="pie-card-title">
              {{ $t('dashboard.deployment_update_process') }}
            </div>

            <progress-pie-chart ref="progressPie" />
          </div>
          <div style="border-left: solid 1px #e7eaf3; flex: 0 0 1px" />
          <div class="flex-1" style="padding: 30px; overflow: hidden">
            <div class="pie-card-title">
              {{ $t('dashboard.advanced_update_process') }}
            </div>
            <progress-pie-chart ref="progressPie1" />
          </div>
        </div>
      </div>
    </div>

    <!-- command push volume -->
    <div class="lg-card mt-7">
      <div class="lg-card-title-block flex justify-between">
        <div class="lg-card-title">
          {{ $t('dashboard.command_push_volume') }}
        </div>
        <div class="rect-switch self-center">
          <div
            :class="[
              'rect-switch-default',
              appSelected === 'days' ? 'rect-switch-actived' : ''
            ]"
            @click="handleAppSelect('days')"
          >
            {{ $t('dashboard.days') }}
          </div>
          <div
            :class="[
              'rect-switch-default',
              appSelected === 'months' ? 'rect-switch-actived' : ''
            ]"
            @click="handleAppSelect('months')"
          >
            {{ $t('dashboard.month') }}
          </div>
        </div>
      </div>
      <div class="flex">
        <cmd-chart ref="cmdChart" />
      </div>
    </div>
  </div>
</template>
<script>
import Instruct from '@/components/Instruct/Instruct.vue'
import ProgressChart from './commonents/progress-chart.vue'
import {
  getDeviceSummary,
  getDeviceTrend,
  getOnlineDeviceByHour,
  getOnlineDeviceByDay,
  getInstallTrend,
  getDownloadTrend,
  getUserActivity,
  getAppstoreCount,
  getOnlineTotalDevice
} from '@/api/dashboard'
import StockDeviceChart from './commonents/stock-device-chart.vue'
import ActivedDeviceChart from './commonents/actived-device-chart.vue'
import CmdChart from './commonents/cmd-chart.vue'
import ActivityDeviceHourChart from './commonents/activity-device-hour-chart.vue'
import ActivityDeviceDayChart from './commonents/activity-device-day-chart.vue'
import ProgressPieChart from './commonents/progress-pie-chart.vue'
import AppInstallChart from './commonents/app-install-chart.vue'
import { numberFilter } from '@/filters/index'
export default {
  components: {
    Instruct,
    ProgressChart,
    StockDeviceChart,
    ActivedDeviceChart,
    CmdChart,
    ActivityDeviceHourChart,
    ActivityDeviceDayChart,
    ProgressPieChart,
    AppInstallChart
  },
  data() {
    return {
      hoverDelay: 500,
      appSelected: 'days',
      deviceActived: 1,
      estateActived: 3,
      appDownActived: 1,
      // operator
      activeOperator: 0,
      totalOperator: 0,
      // developer
      activeDeveloper: 0,
      totalDeveloper: 0,
      // Ӧ������
      appstoreCount: 0,
      // ����
      onlineDevice: 0,
      onlineDeviceAverage: 0,
      onlineDeviceData: null,
      // ��Ծ
      activityTodayDevice: 0,
      activityDevice: 0,
      activityDeviceData: null,
      activityDeviceAverage: 0,
      // ���
      stockDevice: 0,
      stockDeviceData: null,
      stockTodayDevice: 0,
      stockDeviceAverage: 0,
      // ����
      activedDevice: 0,
      activedDeviceData: null,
      activedTodayDevice: 0,
      activedDeviceAverage: 0,
      // install
      installCount: 0,
      installCountAverage: 0,
      installData: null,
      // process
      deploymentInstalled: 0,
      deploymentUninstalled: 0,
      advanceInstalled: 0,
      advanceUninstalled: 0
    }
  },
  computed: {
    getOperatorPercent() {
      if (this.totalOperator === 0) {
        return '0'
      } else {
        return ((this.activeOperator / this.totalOperator) * 100).toFixed(1)
      }
    },
    getDeveloperPercent() {
      if (this.totalDeveloper === 0) {
        return '0'
      } else {
        return ((this.activeDeveloper / this.totalDeveloper) * 100).toFixed(1)
      }
    },
    getOnlinePercent() {
      if (this.onlineDeviceAverage === 0) {
        return '0'
      } else {
        return (
          ((this.onlineDevice - this.onlineDeviceAverage) /
            this.onlineDeviceAverage) *
          100
        ).toFixed(1)
      }
    },
    getActivityPercent() {
      if (this.activityDeviceAverage === 0) {
        return '0'
      } else {
        return (
          ((this.activityTodayDevice - this.activityDeviceAverage) /
            this.activityDeviceAverage) *
          100
        ).toFixed(1)
      }
    },
    getActivedPercent() {
      if (this.activedDeviceAverage === 0) {
        return '0'
      } else {
        return (
          ((this.activedTodayDevice - this.activedDeviceAverage) /
            this.activedDeviceAverage) *
          100
        ).toFixed(1)
      }
    },
    getStockPercent() {
      if (this.stockDeviceAverage === 0) {
        return '0'
      } else {
        return (
          ((this.stockTodayDevice - this.stockDeviceAverage) /
            this.stockDeviceAverage) *
          100
        ).toFixed(1)
      }
    },
    getInstallPercent() {
      if (this.installCountAverage === 0) {
        return '0'
      } else {
        return (
          ((this.installCount - this.installCountAverage) /
            this.installCountAverage) *
          100
        ).toFixed(1)
      }
    },
    getProcessPercent() {
      if (
        !this.deploymentUninstalled &&
        !this.deploymentInstalled &&
        !this.advanceInstalled &&
        !this.advanceUninstalled
      ) {
        return 0
      } else {
        return (
          ((this.deploymentInstalled + this.advanceInstalled) * 100) /
          (this.deploymentUninstalled +
            this.advanceUninstalled +
            this.deploymentInstalled +
            this.advanceInstalled)
        ).toFixed(1)
      }
    }
  },
  created() {
    this.getUserActivity()
    this.getDeviceSummary()
    this.getOnlineDeviceByDay()
    this.getDeviceTrend()
    this.getDownloadTrend()
    this.getAppstoreCount()
  },
  mounted() {
    this.getOnlineDeviceByHour()
    this.getInstallTrend()
  },
  methods: {
    numberFilter,
    handleAppSelect(selected) {
      this.appSelected = selected
      if (selected === 'days') {
        this.$nextTick(() => {
          if (typeof this.$refs.cmdChart !== 'undefined' && this.$refs.cmdChart !== null) {
            // Access obj properties here
            this.$refs.cmdChart.init({
              timeUnit: 'Day',
              timeRange: 15
            })
          }
        })
      } else if (selected === 'months') {
        this.$nextTick(() => {
          if (typeof this.$refs.cmdChart !== 'undefined' && this.$refs.cmdChart !== null) {
            // Access obj properties here
            this.$refs.cmdChart.init({
              timeUnit: 'Month',
              timeRange: 12
            })
          }
        })
      }
    },
    handleDeviceTab(deviceActived) {
      this.deviceActived = deviceActived
      if (deviceActived === 1) {
        this.$nextTick(() => {
          if (typeof this.$refs.onlineDevice !== 'undefined' && this.$refs.onlineDevice !== null) {
            // Access obj properties here

            this.$refs.onlineDevice.initChart(this.onlineDeviceData)
          }
        })
      } else if (deviceActived === 2) {
        this.$nextTick(() => {
          if (typeof this.$refs.activityDevice !== 'undefined' && this.$refs.activityDevice !== null) {
            // Access obj properties here
            this.$refs.activityDevice.initChart(this.activityDeviceData)
          }
        })
      }
    },
    handleEstateTab(estateActived) {
      this.estateActived = estateActived
      if (estateActived === 3) {
        this.$nextTick(() => {
          this.$refs.acitivedDevice.initChart(this.activedDeviceData)
        })
      } else if (estateActived === 4) {
        this.$nextTick(() => {
          this.$refs.stockDevice.initChart(this.stockDeviceData)
        })
      }
    },
    handleAppTab(appDownActived) {
      this.appDownActived = appDownActived
      if (appDownActived === 1) {
        this.$nextTick(() => {
          this.$refs.appInstall.initChart(this.installData)
        })
      } else if (appDownActived === 2) {
        this.$nextTick(() => {
          if (typeof this.$refs.progressPie !== 'undefined' && this.$refs.progressPie !== null) {
            // Access obj properties here
            
            this.$refs.progressPie.initChart([
              {
                name: 'Updated',
                value: this.deploymentInstalled,
                color: '#377DFF'
              },
              {
                name: 'Not Update',
                value: this.deploymentUninstalled,
                color: '#B9D2FF'
              }
            ])
  
            this.$refs.progressPie1.initChart([
              {
                name: 'Updated',
                value: this.advanceInstalled,
                color: '#377DFF'
              },
              {
                name: 'Not Update',
                value: this.advanceUninstalled,
                color: '#B9D2FF'
              }
            ])
          }
        })
      }
    },
    getAppstoreCount() {
      getAppstoreCount()
        .then((res) => {
          this.appstoreCount = res
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getUserActivity() {
      getUserActivity({
        characterCode: 'OPERATOR',
        timeUnit: 'Day',
        timeRange: '7'
      })
        .then((res) => {
          this.activeOperator = res.activeCounts
          this.totalOperator = res.totalCounts
        })
        .catch((err) => {
          this.$confirmError(err)
        })
      getUserActivity({
        characterCode: 'DEV',
        timeUnit: 'Day',
        timeRange: '7'
      })
        .then((res) => {
          this.activeDeveloper = res.activeCounts
          this.totalDeveloper = res.totalCounts
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getInstallTrend() {
      getInstallTrend({
        dateUnit: 'Day',
        dateRange: 15
      })
        .then((res) => {
          if (res.yaxisData && res.yaxisData.length > 0) {
            let sum = 0
            const length = res.yaxisData.length
            for (let i = 0; i < res.yaxisData.length; i++) {
              sum += res.yaxisData[i]
            }
            this.installCountAverage = sum / length
            this.installCount = res.yaxisData[length - 1]
            this.installData = res
            if (typeof this.$refs.appInstall !== 'undefined' && this.$refs.appInstall !== null) {
            // Access obj properties here
            
            this.$refs.appInstall.initChart(this.installData)
          }
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getDownloadTrend() {
      getDownloadTrend()
        .then((res) => {
          this.deploymentInstalled = res.deploymentInstalled
          this.deploymentUninstalled = res.deploymentUninstalled
          this.advanceInstalled = res.advanceInstalled
          this.advanceUninstalled = res.advanceUninstalled
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getOnlineDeviceByHour() {
      getOnlineDeviceByHour({
        timeUnit: 'Hour',
        timeRange: 15
      })
        .then((res) => {
          if (res.yaxisData && res.yaxisData.length > 0) {
            let sum = 0
            const length = res.yaxisData.length
            for (let i = 0; i < res.yaxisData.length; i++) {
              sum += res.yaxisData[i]
            }
            this.onlineDeviceAverage = sum / length
            this.onlineDevice = res.yaxisData[length - 1]
            this.onlineDeviceData = res
            if (typeof this.$refs.onlineDevice !== 'undefined' && this.$refs.onlineDevice !== null) {
            // Access obj properties here
              this.$refs.onlineDevice.initChart(this.onlineDeviceData)
            }
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getOnlineDeviceByDay() {
      getOnlineDeviceByDay({
        timeUnit: 'Day',
        timeRange: 15
      })
        .then((res) => {
          if (res.yaxisData && res.yaxisData.length > 0) {
            let sum = 0
            const length = res.yaxisData.length
            for (let i = 0; i < res.yaxisData.length; i++) {
              sum += res.yaxisData[i]
            }
            this.activityDeviceAverage = sum / length
            this.activityTodayDevice = res.yaxisData[length - 1]
            this.activityDeviceData = res
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })

      getOnlineTotalDevice({})
        .then((res) => {
          this.activityDevice = res
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getDeviceTrend() {
      getDeviceTrend({
        statisticType: 'TERMINAL_ACTIVE_INCREASE',
        recentN: 15
      })
        .then((res) => {
          if (res.yaxisData && res.yaxisData.length > 0) {
            let sum = 0
            for (let i = 0; i < res.yaxisData.length; i++) {
              sum += res.yaxisData[i]
            }
            this.activedDeviceAverage = sum / res.yaxisData.length
            this.activedDeviceData = res
            if (typeof this.$refs.acitivedDevice !== 'undefined' && this.$refs.acitivedDevice !== null) {
            // Access obj properties here
              this.$refs.acitivedDevice.initChart(this.activedDeviceData)
            }
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
      getDeviceTrend({
        statisticType: 'TOTAL_TERMINAL_INCREASE',
        recentN: 15
      })
        .then((res) => {
          if (res.yaxisData && res.yaxisData.length > 0) {
            let sum = 0
            for (let i = 0; i < res.yaxisData.length; i++) {
              sum += res.yaxisData[i]
            }
            this.stockDeviceAverage = sum / res.yaxisData.length
            this.stockDeviceData = res
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getDeviceSummary() {
      // stock device
      getDeviceSummary({
        statisticType: 'TOTAL_TERMINAL_INCREASE'
      })
        .then((res) => {
          this.stockDevice = res.totalAmount
          this.stockTodayDevice = res.todayAmount
        })
        .catch((err) => {
          this.$confirmError(err)
        })
      // new actived device
      getDeviceSummary({
        statisticType: 'TERMINAL_ACTIVE_INCREASE'
      })
        .then((res) => {
          this.activedDevice = res.totalAmount
          this.activedTodayDevice = res.todayAmount
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.top-bar {
  display: flex;
  gap: 28px;
  margin-top: 20px;
  align-self: stretch;
  .top-card {
    flex-grow: 1;
    background-color: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.12),
      0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 4px rgba(0, 0, 0, 0.04);
    .top-label {
      font-size: 14px;
      font-weight: normal;
      line-height: 17px;
      color: #677796;
    }
    .top-num {
      font-size: 24px;
      font-weight: bolder;
      line-height: 35px;
      color: #0256ff;
    }
    .top-count {
      margin-left: 4px;
      font-size: 16px;
      font-weight: normal;
      line-height: 23px;
      color: #767676;
    }
    .top-percent {
      background-color: #e5f9f6;
      border-radius: 3px;
      font-size: 10px;
      padding: 4px 6px 4px 6px;
      font-weight: bold;
      line-height: 14px;
      vertical-align: baseline;
      color: #08cbaa;
    }
  }
}

.lg-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.12),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 4px rgba(0, 0, 0, 0.04);
  .lg-card-title-block {
    padding: 21px;
    height: 64px;
    border-bottom: #e7eaf3 solid 1px;
    .lg-card-title {
      padding-left: 2px;
      font-size: 16px;
      font-weight: bold;
      line-height: 23px;
      letter-spacing: 0px;
      color: #1a1a1a;
    }
  }
}

.data-block {
  display: flex;
  height: 100px;
  background-color: #f9fafd;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}

.pie-card-title {
  padding-left: 2px;
  font-size: 16px;
  font-weight: bold;
  line-height: 23px;
  letter-spacing: 0px;
  color: #1a1a1a;
}

.data-block-item {
  min-width: 200px;
  position: relative;
  cursor: pointer;
  background: #f9fafd;
  padding: 14px 24px;
  &:hover {
    background-color: #fff;
  }
  .data-label {
    font-size: 14px;
    font-weight: normal;
    line-height: 21px;
    color: #677796;
  }

  .data-count {
    font-size: 18px;
    font-weight: bolder;
    line-height: 25px;
    margin: 2px 0 5px 0;
    letter-spacing: 0px;
    /* ����ɫ/����ɫ */
    color: #1a1a1a;
  }

  .data-percent {
    background-color: #e5f9f6;
    border-radius: 3px;
    font-size: 10px;
    padding: 4px 6px 4px 6px;
    font-weight: bold;
    line-height: 14px;
    color: #08cbaa;
  }
  .data-percent-down {
    background-color: #fde1e1;
    border-radius: 3px;
    font-size: 10px;
    padding: 4px 6px 4px 6px;
    font-weight: bold;
    line-height: 14px;
    color: #f56c6c;
  }
}

.actived {
  background-color: #fff;
  border-bottom: solid 2px #377dff;
}

.rect-switch {
  height: 38px;
  width: 157px;
  border-radius: 6px;
  background: #f8fafd;
  border: 1px solid rgba(0, 0, 0, 0.03);
  padding: 3px;
  display: flex;
  .rect-switch-actived {
    background: #ffffff;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
  }
  .rect-switch-default {
    cursor: pointer;
    border-radius: 5px;

    width: 77px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    letter-spacing: 0px;
    color: #7f8d9b;
  }
}
</style>
